<template>
    <div class="madp-hotList">
        <el-alert title="对移动端和PC端营销素材热榜的显示规则进行配置" type="info" show-icon :closable="false"></el-alert>
        <div class="madp-boxs">
            <div class="madp-radio-box">
                <el-radio-group v-model="radioValue" v-for="(item, index) in radioData" :key="index">
                    <el-radio class="madp-radio" :label="item.id"
                        >{{ item.radioName }}<span>{{ item.content }}</span></el-radio
                    >
                </el-radio-group>
            </div>
        </div>
        <div class="madp-buttons">
            <el-button class="madp-btn" type="primary" size="medium" @click="hotSaveReleaseFn">保存即发布</el-button>
            <el-button class="madp-btn madp-btn-look" type="primary" size="medium" @click="lookButton">查看</el-button>
        </div>
        <el-dialog title="热榜" v-if="dialogVisible" :visible.sync="dialogVisible" :before-close="handleClose" :close-on-click-modal="false">
            <hot-list-look-view :hotState="radioValue"></hot-list-look-view>
        </el-dialog>
    </div>
</template>

<script>
import HotListLookView from '@/views/customers-into/marketing-material/material/hot-list-look-view.vue';
import { hotSaveRelease } from '@/api/customer-into/marketing-material';
export default {
    components: {
        HotListLookView
    },
    data() {
        return {
            // 类型数据
            radioData: [
                {
                    id: 1,
                    radioName: '素材排名按照被发送量来计算，统一排名',
                    content: '发送量包含员工发送客户，也包括客户间的转发量'
                },
                {
                    id: 2,
                    radioName: '素材排名按照打开量来计算，统一排名',
                    content: '打开量为客户打开素材的次数'
                },
                {
                    id: 3,
                    radioName: '素材排名按照被发送量来计算，分素材类型排名',
                    content: '发送量包含员工发送客户，也包括客户间的转发量'
                },
                {
                    id: 4,
                    radioName: '素材排名按照打开量来计算，分素材类型排名',
                    content: '打开量为客户打开素材的次数'
                }
            ],
            radioValue: 1, //默认选中第一个
            dialogVisible: false //默认关闭
        };
    },
    methods: {
        // 查看
        lookButton() {
            this.dialogVisible = true;
        },
        //关闭按钮操作
        handleClose() {
            this.dialogVisible = false;
        },
        //保存即发布
        hotSaveReleaseFn() {
            let obj = {
                hotState: this.radioValue
            };
            hotSaveRelease(obj).then((res) => {
                if (res.data.code === 0) {
                    this.$message.success('保存并发布成功');
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.madp-boxs {
    display: flex;
    .madp-radio-box {
        width: 100%;
        flex-wrap: wrap;
        .madp-radio {
            padding: 50px 0 10px 0;
            span {
                display: block;
                font-size: 12px;
                color: #909399;
                margin-left: 24px;
                margin-top: 10px;
            }
        }
    }
    .madp-Images-box {
        width: 40%;
        .madp-block {
            width: 60%;
            margin-top: 10px;
            height: 200px;
        }
    }
}
.madp-buttons {
    display: flex;
    justify-content: center;
    .madp-btn {
        margin: 0 40px;
    }
}
/deep/ .el-radio-group {
    width: 100%;
}
.madp-btn-look {
    padding: 0 46px;
}
</style>
